<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下单</title>
    <link rel="stylesheet" href="__STATIC__/index/assets/sui/dist/css/sm.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2008579_wi32sytndy.css">
    <link rel="stylesheet" href="__STATIC__/index/assets/css/index.css">
    <link rel="stylesheet" href="__STATIC__/index/assets/sui/dist/css/sm-extend.min.css">
</head>

<body>
<!-- page 容器 -->
<!-- page 容器 -->
<div class="page_group">
    <div class="page">

        <!-- 工具栏 -->
        <div class="content">
            <header class="bar bar-nav">
                <a href="" onclick="javascript:window.history.go(-1);" class="icon icon-left pull-left" data-direction="left"></a>
                <h1 class="title">我要吃饭</h1>
            </header>
            <div class="order_user_msg">
                <div class="order_shou">
                    收
                </div>
                {if $user['user_phone']}
                <div class="order_msg">
                    <div class="order_address">
                         {$user['user_address']}
                    </div>
                    <span>{$user['user_phone']}</span>
                </div>
                <div class="order_charge_address">
                    <a href="{:url('user/saveUserMsg')}">修改地址</a>
                </div>
                {else /}
                <div class="order_msg">
                    <a href="{:url('user/saveUserMsg')}">点此设置收货地址</a>
                </div>
                {/if}
            </div>
            <div class="order_content">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">物品信息:</div>
                                    <div class="item-input">
                                        <input type="text" name="order_title" class="open-about"  id="msg" placeholder="请选择物品信息" >
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">接单时效:</div>
                                    <div class="item-input">
                                        <input type="text" id="outtime" name="outtime" placeholder="选择订单失效时间">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">备注:</div>
                                    <div class="item-input">
                                        <textarea class="order_textarea" name="order_content" placeholder="带饭一单仅限一处地方,如果是提前预定,说明单号地点,提前支付餐费请联系客服"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">配送费:</div>
                                    <div class="item-input">
                                        <input type="number" name="order_price" id="price" value="" placeholder="仅配送费">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <input type="hidden" name="order_outtime">
                    </ul>
                </div>
            </div>
            <div class="order_pay">
                <div class="order_pay_l">共计：0元</div>
                <div class="order_pay_r" onclick="order_pay()">去付款</div>
            </div>
        </div>
    </div>
</div>

</body>
<script src='http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='__STATIC__/index/assets/sui/dist/js/sm.js'></script>
<script type='text/javascript' src='__STATIC__/index/assets/sui/dist/js/sm-extend.js' charset='utf-8'></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
    wx.config({$wxjsconfig|raw});
</script>
<script>
    $("#msg").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
      <button class="button button-link pull-right close-picker">确定</button>\
      <h1 class="title">请选择物品种类</h1>\
      </header>',
        cols: [
            {
                textAlign: 'center',
                values: ['新食堂带饭','旧食堂带饭','教职工食堂带饭','买零食'],
            }
        ]
    });
    $("#outtime").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
      <button class="button button-link pull-right close-picker">确定</button>\
      <h1 class="title">请选择订单失效退款时间</h1>\
      </header>',
        cols: [
            {
                textAlign: 'center',
                values: ['10分钟后失效退款','20分钟后失效退款','30分钟后失效退款'],
            }
        ],
        onClose:function () {
            if( $('input[name="outtime"]').val()=="10分钟后失效退款"){
                $('input[name="order_outtime"]').val(10);
            }else if($('input[name="outtime"]').val()=="20分钟后失效退款"){
                $('input[name="order_outtime"]').val(20);
            }else if($('input[name="outtime"]').val()=="30分钟后失效退款"){
                $('input[name="order_outtime"]').val(30);
            }

        }
    });
    $("#price").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
      <button class="button button-link pull-right close-picker">确定</button>\
      <h1 class="title">请选择订单金额</h1>\
      </header>',
        cols: [
            {
                textAlign: 'center',
                values: ["1.50","2.00","2.50","3.00","4.00","5.00"],
            }
        ],
        onClose:function () {
            var price=$('input[name="order_price"]').val();
           $('.order_pay_l').html('共计：'+price+'元');
        }
    });
</script>
<script>
    function order_pay() {
        var title=$('input[name="order_title"]').val();
        var content=$('textarea').val();
        var price=$('input[name="order_price"]').val();
        var out_time=$('input[name="order_outtime"]').val();
        if(!title || !content || !price || !out_time){
            $.toast('请先完善订单后提交', 1500);
            return;
        }
        $.showPreloader('正在调起支付',5000);
        setTimeout(function () {
            $.hidePreloader();
        }, 5000);
        $.ajax({
            url: "{:url('order')}",
            type: "POST",
            data: {
                order_title:title,
                order_content:content,
                order_price:price,
                order_outtime:out_time
            },
            dataType: "json",
            success: function(res){
                if(res.status==0){
                    $.hidePreloader();
                    $.toast(res.msg, 2000);
                }else{
                    js_pay(res.msg);
                }
            }
        });
    }
    function js_pay(order_num) {
        $.ajax({
            url: "{:url('pay')}",
            type: "POST",
            data: {
                order_number:order_num
            },
            dataType: "json",
            success: function(res){
                $.hidePreloader();
                wx.chooseWXPay({
                    timestamp: res.timestamp,
                    nonceStr: res.nonceStr,
                    package: res.package,
                    signType: res.signType,
                    paySign: res.paySign, // 支付签名
                    success: function (res) {
                        window.location.href="{:url('myorder/index')}";
                    },
                    cencel:function (data) {
                        $.toast('你取消了支付', 1500);
                    }
            });
            }
        });
    }
</script>
</html>